<template>
  <div class="layout">
    <!-- 搜索 -->
    <el-form :model="formData" :rules="rules" label-position="left" label-width="auto" class="zw-table-search" ref="formRef">
      <el-row class="chat_form" :gutter="20">
        <!-- 联系人 -->
        <el-col :span="12" v-if="props.isCompany">
          <el-form-item label="联系人" prop="msgtype">
            <el-select v-model="formData.cust_id" placeholder="请选择" @change="changePage">
              <el-option v-for="item in custList" :key="item.id" :label="item.name" :value="item.cust_id" :disabled="item.cust_id == 0"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 消息类型 -->
        <el-col :span="12">
          <el-form-item label="消息类型" prop="msgtype">
            <el-select v-model="formData.msgtype" placeholder="请选择" @change="changePage">
              <el-option v-for="item in takeover" :key="item.value" :label="item.name" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!--消息搜索  -->
        <el-col :span="12">
          <el-form-item label="消息搜索" prop="keyword">
            <el-input v-model="formData.keyword" placeholder="请输入内容" :suffix-icon="Search" clearable></el-input>
          </el-form-item>
        </el-col>
        <!-- 时间筛选 -->
        <el-col :span="12">
          <el-form-item label="时间筛选" class="selectTime" prop="start_time">
            <el-date-picker :style="{ width: isWorkUerId ? '290px' : 'auto' }" v-model="times" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="props.isCompany ? 24 : 12">
          <el-form-item>
            <el-button type="primary" @click="query(false)">查询</el-button>
            <el-button @click="reset">清空</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div v-if="singleData.length > 0" :class="ltType == 1 ? 'big_box' : ''">
      <ul style="width: 100%" class="scroll record" :class="ltType == 1 ? 'setwidth' : 'restwidth'" @scroll="scroll">
        <div style="padding: 0 16px">
          <li v-for="item in singleData" :key="item.id">
            <div class="center">
              <span>{{ item.msgtime }}</span>
            </div>
            <div>
              <!-- 文本 -->
              <template v-if="item.msgtype === 1">
                <div class="box_right" v-if="item.from_type == 1">
                  <div class="triangle_right"></div>
                  <div class="box2_rights">
                    <span class="text1_right">{{ item.name || '机器人' }}</span>
                    <!-- <div class="white_right"> {{ item.text }} </div> -->
                    <div class="white_right white_right_text" v-html="getTextHtml(item.text)"></div>
                  </div>
                  <el-image class="img_right" :src="item.avatar">
                    <template #error>
                      <el-image src="/static/file/pic.png"></el-image>
                    </template>
                  </el-image>
                </div>
                <div class="box" v-else>
                  <div class="triangle"></div>
                  <el-image class="img" :src="item.avatar">
                    <template #error>
                      <el-image src="/static/file/pic.png"></el-image>
                    </template>
                  </el-image>
                  <!-- <img class="img" :src="item.avatar || '@/assets/logo.png'" /> -->
                  <div class="box2">
                    <span class="text1">{{ item.name }}</span>
                    <!-- <div class="white"> {{ item.text }} </div> -->
                    <div class="white white_text" v-html="getTextHtml(item.text)"></div>
                  </div>
                </div>
              </template>
              <!-- 图片 -->
              <template v-if="item.msgtype === 9">
                <div class="picture_right" v-if="item.from_type == 1">
                  <div class="box_right">
                    <div class="box2_right">
                      <span class="text1_right">{{ item.name }}</span>
                      <el-image :src="item.media_path" :previewSrcList="[item.media_path]" style="width: 150px; height: 150px"></el-image>
                    </div>
                    <el-image class="img_right" :src="item.avatar">
                      <template #error>
                        <el-image src="/static/file/pic.png"></el-image>
                      </template>
                    </el-image>
                  </div>
                </div>
                <div class="picture" v-else>
                  <div class="box">
                    <el-image class="img" :src="item.avatar">
                      <template #error>
                        <el-image src="/static/file/pic.png"></el-image>
                      </template>
                    </el-image>
                    <!-- <img class="img" :src="item.avatar || '@/assets/logo.png'" /> -->
                    <div class="box2">
                      <span class="text1">{{ item.name }}</span>
                      <el-image :src="item.media_path" :previewSrcList="[item.media_path]" style="width: 150px; height: 150px"></el-image>
                      <!-- <img class="img1" :src="item.media_path" @click="lookPic(item)" /> -->
                    </div>
                  </div>
                </div>
              </template>
              <template v-if="item.msgtype === 2">
                <div class="picture_right" v-if="item.from_type == 1">
                  <div class="box_right">
                    <div class="box2_right">
                      <span class="text1_right">{{ item.name }}</span>
                      <el-image :src="item.media_path" :previewSrcList="[item.media_path]" style="width: 150px; height: 150px" fit="scale-down"></el-image>
                      <!-- <img class="img1" :src="item.media_path" @click="lookPic(item)" /> -->
                    </div>
                    <el-image class="img_right" :src="item.avatar">
                      <template #error>
                        <el-image src="/static/file/pic.png"></el-image>
                      </template>
                    </el-image>
                    <!-- <img class="img_right" :src="item.avatar || '@/assets/logo.png'" /> -->
                  </div>
                </div>
                <div class="picture" v-else>
                  <div class="box">
                    <el-image class="img" :src="item.avatar">
                      <template #error>
                        <el-image src="/static/file/pic.png"></el-image>
                      </template>
                    </el-image>
                    <!-- <img class="img" :src="item.avatar || '@/assets/logo.png'" /> -->
                    <div class="box2">
                      <span class="text1">{{ item.name }}</span>
                      <el-image :src="item.media_path" :previewSrcList="[item.media_path]" style="width: 150px; height: 150px" fit="scale-down"></el-image>
                      <!-- <img class="img1" :src="item.media_path" @click="lookPic(item)" /> -->
                    </div>
                  </div>
                </div>
              </template>

              <!-- <audio autoplay src="/static/voice.mp3" controls> 您的浏览器不支持播放 </audio> -->
              <!-- 语音 -->
              <template v-if="item.msgtype === 5">
                <div class="voice_right" v-if="item.from_type == 1">
                  <div class="box_right">
                    <div class="triangle_right"></div>
                    <div class="box2_right">
                      <span class="text1_right">{{ item.name }}</span>
                      <div class="voiceted_right" @click="palyAudio(item)">
                        <!-- item.media_path -->
                        <span>{{ JSON.parse(item.msgdata)?.play_length || 0 }}秒</span>
                        <audio ref="onaudio" class="audio_con_right" :class="'audio_box_' + item.id" :src="item.media_path" controls> 您的浏览器不支持播放 </audio>
                        <img src="@/assets/chatDetails/voice.png" style="width: 11px; height: 15px" />
                      </div>
                    </div>
                    <!-- <img class="img_right" :src="item.avatar || '@/assets/logo.png'" /> -->
                    <el-image class="img_right" :src="item.avatar">
                      <template #error>
                        <el-image src="/static/file/pic.png"></el-image>
                      </template>
                    </el-image>
                  </div>
                </div>
                <div class="voice" v-else>
                  <div class="box">
                    <el-image class="img" :src="item.avatar">
                      <template #error>
                        <el-image src="/static/file/pic.png"></el-image>
                      </template>
                    </el-image>
                    <!-- <img class="img" :src="item.avatar || '@/assets/logo.png'" /> -->
                    <div class="triangle"></div>
                    <div class="box2">
                      <span class="text1">{{ item.name }}</span>
                      <div class="voiceted" @click="palyAudio(item)">
                        <!-- item.media_path -->
                        <audio ref="onaudio" class="audio_con" :class="'audio_box_' + item.id" :src="item.media_path" controls> 您的浏览器不支持播放 </audio>
                        <img src="@/assets/chatDetails/voice.png" style="width: 11px; height: 15px" />
                        <span>{{ JSON.parse(item.msgdata)?.play_length || 0 }}秒</span>
                      </div>
                    </div>
                  </div>
                </div>
              </template>

              <!-- 视频 -->
              <template v-if="item.msgtype === 6">
                <div class="gif" v-if="item.from_type == 1">
                  <div class="box_right">
                    <div class="box2_right">
                      <span class="text1_right">{{ item.name }}</span>
                      <div class="video_box_right" @click.prevent="playVideo(item)">
                        <div class="play_right"></div>
                        <el-image :src="getVideoImage(item.media_path, 140, 100)">
                          <template #error>
                            <el-image src="/static/file/mov.png"></el-image>
                          </template>
                        </el-image>
                      </div>
                    </div>
                    <el-image class="img_right" :src="item.avatar">
                      <template #error>
                        <el-image src="/static/file/pic.png"></el-image>
                      </template>
                    </el-image>
                    <!-- <img class="img_right" :src="item.avatar || '@/assets/logo.png'" /> -->
                  </div>
                </div>
                <div class="gif" v-else>
                  <div class="box">
                    <el-image class="img" :src="item.avatar">
                      <template #error>
                        <el-image src="/static/file/pic.png"></el-image>
                      </template>
                    </el-image>
                    <!-- <img class="img" :src="item.avatar || '@/assets/logo.png'" /> -->
                    <div class="box2">
                      <span class="text1">{{ item.name }}</span>
                      <div class="video_box" @click.prevent="playVideo(item)">
                        <div class="play"></div>
                        <el-image class="wel_content_file_item" :src="getVideoImage(item.media_path, 140, 100)">
                          <template #error>
                            <el-image src="/static/file/mov.png"></el-image>
                          </template>
                        </el-image>
                      </div>
                    </div>
                  </div>
                </div>
              </template>

              <!-- 文件txt -->
              <template v-if="item.msgtype === 10">
                <div class="txt_right" v-if="item.from_type == 1">
                  <div class="box_right">
                    <div class="box2_right">
                      <span class="text1_right">{{ item.name }}</span>
                      <div class="texttxt_right" @click="lookFile(item)">
                        <div style="display: flex">
                          <div style="display: flex; flex-direction: column"
                            ><span>{{ JSON.parse(item.msgdata)?.filename }}</span
                            ><span style="margin-top: 10px">{{ (JSON.parse(item.msgdata)?.filesize / 1024 / 1024).toFixed(2) }}M</span></div
                          >
                          <img :src="getSuffixIcon(item.media_path)" style="width: 40px; height: 40px; margin-left: 40px" />
                        </div>
                      </div>
                    </div>
                    <el-image class="img_right" :src="item.avatar">
                      <template #error>
                        <el-image src="/static/file/pic.png"></el-image>
                      </template>
                    </el-image>
                    <!-- <img class="img_right" :src="item.avatar || '@/assets/logo.png'" />  -->
                    <div class="triangle_right"></div>
                  </div>
                </div>
                <div class="txt" v-else>
                  <div class="box">
                    <el-image class="img" :src="item.avatar">
                      <template #error>
                        <el-image src="/static/file/pic.png"></el-image>
                      </template>
                    </el-image>
                    <!-- <img class="img" :src="item.avatar || '@/assets/logo.png'" />  -->
                    <div class="triangle"></div>
                    <div class="box2">
                      <span class="text1">{{ item.name }}</span>
                      <div class="texttxt" @click="lookFile(item)">
                        <div style="display: flex">
                          <div style="display: flex; flex-direction: column"
                            ><span>{{ JSON.parse(item.msgdata)?.filename }}</span
                            ><span style="margin-top: 10px">{{ (JSON.parse(item.msgdata)?.filesize / 1024 / 1024).toFixed(2) }}M</span></div
                          >
                          <img :src="getSuffixIcon(item.media_path)" style="width: 40px; height: 40px; margin-left: 40px" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>

              <!-- 链接 -->
              <template v-if="item.msgtype === 11">
                <div class="link_right" v-if="item.from_type == 1">
                  <div class="box_right">
                    <div class="triangle_right"></div>
                    <div class="box2_right">
                      <span class="text1_right">{{ item.name }}</span>
                      <div class="links_right" @click="lookLink(item)">
                        <div>
                          <div>{{ JSON.parse(item.msgdata)?.title }}</div>
                          <div style="display: flex; margin-top: 11px">
                            <div class="linkss_right">{{ JSON.parse(item.msgdata)?.link_url }}</div>
                            <img style="width: 50px; height: 50px" :src="JSON.parse(item.msgdata)?.image_url" />
                          </div>
                        </div>
                      </div>
                    </div>
                    <el-image class="img_right" :src="item.avatar">
                      <template #error>
                        <el-image src="/static/file/pic.png"></el-image>
                      </template>
                    </el-image>
                    <!-- <img class="img_right" :src="item.avatar || '@/assets/logo.png'" /> -->
                  </div>
                </div>
                <div class="link" v-else>
                  <div class="box">
                    <el-image class="img" :src="item.avatar">
                      <template #error>
                        <el-image src="/static/file/pic.png"></el-image>
                      </template>
                    </el-image>
                    <!-- <img class="img" :src="item.avatar || '@/assets/logo.png'" /> -->
                    <div class="triangle"></div>
                    <div class="box2">
                      <span class="text1">{{ item.name }}</span>
                      <div class="links" @click="lookLink(item)">
                        <div>
                          <div>{{ JSON.parse(item.msgdata)?.title }}</div>
                          <div style="display: flex; margin-top: 11px">
                            <div class="linkss">{{ JSON.parse(item.msgdata)?.link_url }}</div>
                            <img style="width: 50px; height: 50px" :src="JSON.parse(item.msgdata)?.image_url" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>

              <!-- 小程序消息 -->
              <template v-if="item.msgtype === 12">
                <div class="applet_right" v-if="item.from_type == 1">
                  <div class="box_right">
                    <div class="triangle_right"></div>
                    <div class="box2_right">
                      <span class="text1_right">{{ item.name }}</span>
                      <div class="applets_right">
                        <div style="margin-left: 18px">
                          <div style="margin-top: 11px">
                            <img class="app-img_right" src="@/assets/chatDetails/Appletbg.png" />
                            <span class="app-title_right">{{ JSON.parse(item.msgdata)?.title }}</span>
                          </div>
                          <div style="margin: 8px 0 11px">{{ JSON.parse(item.msgdata)?.description }}</div>
                          <img src="@/assets/chatDetails/appletcurrency.png" />
                          <div class="app_line_right"></div>
                          <img class="app_simg_right" src="@/assets/chatDetails/Applet.png" />
                          <span class="app-text_right">小程序</span>
                        </div>
                      </div>
                    </div>
                    <el-image class="img_right" :src="item.avatar">
                      <template #error>
                        <el-image src="/static/file/pic.png"></el-image>
                      </template>
                    </el-image>
                    <!-- <img class="img_right" :src="item.avatar || '@/assets/logo.png'" /> -->
                  </div>
                </div>
                <div class="applet" v-else>
                  <div class="box">
                    <el-image class="img" :src="item.avatar">
                      <template #error>
                        <el-image src="/static/file/pic.png"></el-image>
                      </template>
                    </el-image>
                    <!-- <img class="img" :src="item.avatar || '@/assets/logo.png'" /> -->
                    <div class="triangle"></div>
                    <div class="box2">
                      <span class="text1">{{ item.name }}</span>
                      <div class="applets">
                        <div style="margin-left: 18px">
                          <div style="margin-top: 11px">
                            <img class="app-img" src="@/assets/chatDetails/Appletbg.png" />
                            <span class="app-title">{{ JSON.parse(item.msgdata)?.title }}</span>
                          </div>
                          <div style="margin: 8px 0 11px">{{ JSON.parse(item.msgdata)?.description }}</div>
                          <img src="@/assets/chatDetails/appletcurrency.png" />
                          <div class="app_line"></div>
                          <img class="app_simg" src="@/assets/chatDetails/Applet.png" />
                          <span class="app-text">小程序</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>

              <!-- 红包 -->
              <template v-if="item.msgtype === 19">
                <div class="noredenvelopes_right" v-if="item.from_type == 1">
                  <div class="box_right">
                    <div class="box2_right">
                      <span class="text1_right">{{ item.name }}</span>
                      <div class="noenvelopes_right">
                        <div class="noenvelopes-layout_right">
                          <img style="width: 40px; height: 40px" src="@/assets/chatDetails/yredenvelopes.png" />
                          <div class="spot_right">{{ item.text }}</div>
                        </div>
                        <div style="margin: 0 20px">
                          <div class="noenvelopes-line_right"></div>
                          <div class="noenvelopes-text_right">红包</div>
                        </div>
                      </div>
                    </div>
                    <el-image class="img_right" :src="item.avatar">
                      <template #error>
                        <el-image src="/static/file/pic.png"></el-image>
                      </template>
                    </el-image>
                    <!-- <img class="img_right" :src="item.avatar || '@/assets/logo.png'" /> -->
                    <div class="redtriangle_right"></div>
                  </div>
                </div>
                <div class="noredenvelopes" v-else>
                  <div class="box">
                    <el-image class="img" :src="item.avatar">
                      <template #error>
                        <el-image src="/static/file/pic.png"></el-image>
                      </template>
                    </el-image>
                    <!-- <img class="img" :src="item.avatar || '@/assets/logo.png'" /> -->
                    <div class="redtriangle"></div>
                    <div class="box2">
                      <span class="text1">{{ item.name }}</span>
                      <div class="noenvelopes">
                        <div class="noenvelopes-layout">
                          <img style="width: 40px; height: 40px" src="@/assets/chatDetails/yredenvelopes.png" />
                          <div class="spot">{{ item.text }}</div>
                        </div>
                        <div style="margin: 0 20px">
                          <div class="noenvelopes-line"></div>
                          <div class="noenvelopes-text">红包</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>

              <!-- 音频存档消息 -->
              <template v-if="item.msgtype === 23">
                <!-- <div class="voice_right" v-if="item.from_type == 1">
                  <div class="box_right">
                    <div class="triangle_right"></div>
                    <div class="box2_right">
                      <span class="text1_right">{{ item.name }}</span>
                      <div class="voiceted_right" @click="palyAudio(item)">
                        <span>{{ JSON.parse(item.msgdata)?.play_length || 0 }}秒</span>
                        <audio ref="onaudio" class="audio_con_right" :class="'audio_box_' + item.id" :src="item.media_path" controls> 您的浏览器不支持播放 </audio>
                        <img src="@/assets/chatDetails/notconnected.png" style="width: 24px; height: 13px" />
                      </div>
                    </div>
                    <el-image class="img_right" :src="item.avatar">
                      <template #error>
                        <el-image src="/static/file/pic.png"></el-image>
                      </template>
                    </el-image>
                  </div>
                </div> -->
                <div class="box_right" v-if="item.from_type == 1">
                  <div class="triangle_right"></div>
                  <div class="box2_right">
                    <span class="text1_right">{{ item.name || '机器人' }}</span>
                    <div class="white_right"> 通话语音：{{ formatDuring(JSON.parse(item.msgdata)?.endtime * 1000 - Date.parse(item.msgtime)) }}</div>
                  </div>
                  <el-image class="img_right" :src="item.avatar">
                    <template #error>
                      <el-image src="/static/file/pic.png"></el-image>
                    </template>
                  </el-image>
                </div>
                <div class="box" v-else>
                  <div class="triangle"></div>
                  <el-image class="img" :src="item.avatar">
                    <template #error>
                      <el-image src="/static/file/pic.png"></el-image>
                    </template>
                  </el-image>
                  <div class="box2">
                    <span class="text1">{{ item.name }}</span>
                    <div class="white"> 通话语音：{{ formatDuring(JSON.parse(item.msgdata)?.endtime * 1000 - Date.parse(item.msgtime)) }}</div>
                    <!-- <div class="white"> 通话语音：{{ Date.parse(item.msgtime) }}</div> -->
                  </div>
                </div>
              </template>

              <!-- 群成员 -->
            </div>
          </li>
        </div>
      </ul>
      <!-- 群组员信列表 -->
      <template v-if="false">
        <div style="width: 30%" v-if="singleData.length > 0">
          <div v-if="ltType == 1" class="group">
            <div class="group-layout">
              <div class="group-distance">
                <!-- <div style="margin-bottom: 16px">
                  <div class="group-total"> 群成员: {{ total }}</div>
                </div> -->
                <el-input @change="onChangeGroupMembers" class="input" v-model="groupMembers" placeholder="请输入名称进行查找" />
              </div>
              <template v-if="group_list.length > 0">
                <div class="records" v-for="item in group_list" :key="item.id" @click="getStyle(item)">
                  <div class="member">
                    <el-image class="group-img" :src="item.avatar">
                      <template #error>
                        <el-image src="/static/file/pic.png"></el-image>
                      </template>
                    </el-image>
                    <span>{{ item.name }}</span> <span>({{ item.type }})</span>
                  </div>
                </div>
              </template>
              <el-empty v-else image="/static/noData.png" description="暂无数据"></el-empty>
            </div>
          </div>
        </div>
      </template>
    </div>
    <el-empty v-else image="/static/noData.png" description="暂无数据"></el-empty>
    <ZWVideoWicket ref="videoWicketRef" />
    <!-- 预览 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" :width="dialogWidth" center>
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
  import { qrcanvas } from 'qrcanvas'
  import { reactive, toRefs, onBeforeMount, onMounted, ref, watch, watchEffect, defineExpose } from 'vue'
  import ZWVideoWicket from '@/components/ZWVideoWicket.vue'
  import { getMessageType, getChatDetails, getGroupChatDetails, getGroupMembers, getGroupChatDetailsUser } from '@/api/employe/riskmonitoring/messagearchiving'
  import { playTime, getVideoImage, getSuffixIcon } from '@/utils/utils'
  import { ElMessage } from 'element-plus'
  import { getEmojiUrl } from '@/utils/emoji'
  import router from '@/router'
  let props = defineProps(['ltType', 'work_user_id', 'singleData', 'msgid', 'roomid', 'groupData', 'staff_id', 'cust_id', 'index', 'isCompany', 'custList'])
  const emit = defineEmits(['query'])
  const dialogVisible = ref(false)
  const groupMembers = ref()
  const selectId = ref(1)
  const total = ref(0)
  const group_list: any = ref([])
  const videoWicketRef = ref(null)
  const dialogImageUrl = ref('')
  const dialogTitle = ref('图片预览')
  const dialogWidth = ref('')
  const singleData = ref([])
  const isWorkUerId = ref(false)

  // 时间戳转化成时分秒
  const formatDuring = (micro_second) => {
    var second = Math.floor(micro_second / 1000)
    // 小时
    var hr = Math.floor((second / 3600) % 24)
    // 分钟
    var min = Math.floor((second / 60) % 60)
    // 秒
    var sec = Math.floor(second % 60)
    return min + '分钟' + sec + '秒'
  }
  // 视频播放
  const playVideo = (item: any) => {
    console.log('视频播放', item.media_path)
    videoWicketRef.value.videoCheck = true
    videoWicketRef.value.video_url = item.media_path
    videoWicketRef.value.getTime()
  }
  // 播放语音
  const palyAudio = (item: any) => {
    let dom = document.querySelector('.audio_box_' + item.id)
    console.log(item.id)
    if (dom.paused) {
      console.log('pause')
      dom.play()
    } else {
      console.log('play')
      dom.pause()
    }
  }
  // 文件
  const lookFile = (item: any) => {
    window.open(item.media_path)
  }
  //lianjie
  // 生成二维码
  const lookLink = (data: any) => {
    const item = JSON.parse(data.msgdata)
    const src = creatQrCode(item.link_url)
    dialogVisible.value = true
    dialogImageUrl.value = src!
    dialogTitle.value = '查看链接'
    dialogWidth.value = '350px'
    // console.log(item, '====lianjie', src)
  }

  // 查看图片
  const lookPic = (data: any) => {
    dialogVisible.value = true
    dialogImageUrl.value = data.media_path
    dialogTitle.value = '查看图片'
    // dialogWidth.value = String(JSON.parse(data.msgdata)?.filesize / 150) + 'px'
  }
  const creatQrCode = (data: any) => {
    return qrcanvas({
      data,
      size: 100
    }).toDataURL('image/png')
  }

  const onChangeGroupMembers = () => {
    let groupMemberParams = {
      roomid: props.roomid,
      keywords: groupMembers.value,
      page: 1,
      page_size: ''
    }
    getGroupMembers(groupMemberParams).then(({ data }: any) => {
      group_list.value = data
      // emit('updatagroupMember', data)
    })
  }
  let times = ref([])
  const formData = reactive({
    msgtype: '',
    keyword: '',
    msgtime: [],
    cust_id: -1
  })
  formData.cust_id = props.isCompany ? -1 : router.currentRoute.value.query.id
  formData.is_corp_cust_search = props.isCompany ? 1 : 0
  let start = ref(true)
  const paged = ref(1)
  const pageg = ref(1)
  const scroll = async (item: any) => {
    const el = document.querySelector('.scroll')
    const clientHeight = el?.clientHeight
    const scrollHeight = el?.scrollHeight
    const scrollTop = Math.ceil(el?.scrollTop)
    if (scrollTop >= scrollHeight - clientHeight) {
      // console.log('scrollTop', scrollTop, paged.value++)
      if (!start.value) return
      query(true, ++paged.value)
    }
  }

  let takeover: any = ref([])
  getMessageType().then((data: any) => {
    takeover.value = data
  })

  const getStyle = (item: any) => {
    selectId.value = item.id
  }
  // 查询记录
  /**
   * @param flag 用来判断是否在滚动
   * @param val 分页
   */
  const query: any = async (flag?: boolean, val: number = 1) => {
    console.log(flag, start.value, '===份额与')
    // 滑动
    if (flag) { 
      paged.value = val
    } else {
      paged.value = 1
      // 点击查询或者重制的状态下， 滚动至顶部
      const el = document.querySelector('.scroll')
      el?.scrollTo(0, 0)
    }

    let params = {
      is_corp_cust_search: formData.is_corp_cust_search,
      cust_id: formData.cust_id,
      work_user_id: props.work_user_id,
      staff_id: props.staff_id,
      msgid: props.msgid,
      msgtype: formData.msgtype,
      keywords: formData.keyword,
      msgtime: times.value,
      page: paged.value,
      page_size: 10
    }
    // 单聊查询记录
    if (props.ltType == 0) {
      if (!props.work_user_id && !props.msgid) return
      let data = []
      if (props.work_user_id) {
        let res1 = await getGroupChatDetailsUser(params)
        data = res1.data || []
      } else {
        let res2 = await getChatDetails(params)
        data = res2.data || []
      }
      if (data.length === 0) start.value = false
      console.log(data, '===聊天数据1')
      singleData.value = flag ? [...singleData.value, ...data] : data
      isWorkUerId.value = props.work_user_id ? true : false
      if (props.index && props.index.index == 0) {
        console.log('触发emit')
        emit('updataSingledata', data)
      }
    } else {
      if (!props.roomid) return
      
      delete params.work_user_id
      params.roomid = props.roomid
      // 群聊查询记录
      isWorkUerId.value = props.work_user_id ? true : false
      const { data } = await getGroupChatDetails(params)
      if (data.length === 0) start.value = false
      singleData.value = flag ? [...singleData.value, ...data] : data
      console.log(data, '===聊天数据2')
      if (flag && props.index && props.index.index == 0) {
        console.log('触发emit')
        emit('updataSingledata', data)
      }
    }
  }
  // 清空数据
  const reset = () => {
    paged.value = 1
    pageg.value = 1
    formData.msgtype = ''
    formData.keyword = ''
    formData.msgtime = []
    times.value = []
    singleData.value = []
    start.value = true
    query()
  }
  reset()

  const getTextHtml = (val: any) => {
    let str = val && val.replace(/\n/g,'<br />').replace(/\[.+?\]/g, (res: any) => {
      return `<img src="${getEmojiUrl(res)}" style="position: relative;top: 3px;width: 20px; height: 20px; line-height: 20px" />`
    })
    console.log(str,'xxxxx123str2')
    return str
  }
  // 切换单群聊置空数据
  // watch(() => props.ltType, () =>reset())
  watch(
    () => props.msgid,
    (val: any) => reset()
  )
  watch(
    () => props.roomid,
    (val) => reset()
  )
  const changePage = () => {
    start.value = true
    paged.value = 1
    pageg.value = 1
  }
  defineExpose({
    query,
    paged,
    pageg,
    start,
    singleData
  })
</script>

<style lang="scss" scoped>
  .layout {
    position: relative;
    .zw-table-search {
      background: #f9f9f9;
      border: 1px solid #eaeaea;
      margin-bottom: 18px;
      box-sizing: border-box;
      padding: 10px 10px 0;
      :deep(.el-form-item) {
        margin-bottom: 10px;

        .el-select {
          width: 100%;
        }
      }
    }
    .chat_form {
      .el-col {
        &:last-child {
          text-align: right;
        }
      }
    }
    .big_box {
      display: flex;
      // height: 300px;
    }
    .el-dialog--center .el-dialog__body img {
      width: 300px;
      height: 300px;
    }

    :deep.active {
      color: #f9624b;
    }

    .scroll {
      overflow: auto;
      height: 400px;
      &::-webkit-scrollbar {
        width: 6px;
        height: 10px;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(144, 147, 153, 0.3);
      }
      &::-webkit-scrollbar-thumb:hover {
        background: rgba(144, 147, 153, 0.6);
      }
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      &::-webkit-scrollbar-track-piece {
        background: transparent;
      }
    }
    .check-box {
      :deep .el-form-item__content {
        display: flex;
        align-items: center;
      }
    }

    .selectTime {
      :deep .el-form-item__content {
        display: flex;
        align-items: center;
        .text-center {
          min-width: 14px;
          margin: 0 13px;
          border-top: 1px solid #969696;
        }
      }
    }

    .record {
      // width: 100%;
      position: relative;
      background-color: #f9f9f9;
      padding-top: 16px;
      border: 1px solid #eae7e7;

      .center span {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
        font-size: 13px;
        color: #969696;
      }
      .box_right {
        display: flex;
        position: relative;
        justify-content: flex-end;
        .triangle_right {
          width: 0;
          height: 0;
          border-left: 6px solid #ffffff;
          border-top: 6px solid transparent;
          border-bottom: 6px solid transparent;
          position: absolute;
          right: 46px;
          top: 23px;
        }
        .redtriangle_right {
          width: 0;
          height: 0;
          border-left: 6px solid #f9624b;
          border-top: 6px solid transparent;
          border-bottom: 6px solid transparent;
          position: absolute;
          right: 46px;
          top: 23px;
        }
        .img_right {
          width: 40px;
          height: 40px;
          margin-left: 7px;
        }
        .box2_rights {
          text-align: right;
          margin-right: 5px;
          .text1_right {
            display: block;
            color: #969696;
            font-size: 12px;
            margin-bottom: 3px;
            text-align: right;
          }
          .white_right {
            background-color: #fff;
            color: #000000;
            max-width: 300px;
            word-break: break-all;
            display: inline-flex;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 16px;
            line-height: 20px;
            font-family: STHeitiSC-Medium, STHeitiSC;
            font-weight: 500;
          }
          .white_right_text {
            display: block;
            text-align: left;
            line-height: 18px;
          }
        }
        .box2_right {
          // display: flex;
          // flex-direction: column;
          // text-align: right;
          margin-right: 5px;
          .text1_right {
            display: block;
            color: #969696;
            font-size: 12px;
            margin-bottom: 3px;
            text-align: right;
          }
          .video_box_right {
            position: relative;
            width: 140px;
            height: 100px;
            cursor: pointer;
            .play_right {
              width: 25px;
              height: 25px;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              background: url('@/assets/image/material/play.png') no-repeat;
              background-size: cover;
              z-index: 1;
            }
          }
          .white_right {
            background-color: #fff;
            color: #000000;
            max-width: 300px;
            word-break: break-all;
            display: inline-flex;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 16px;
            line-height: 20px;
            font-family: STHeitiSC-Medium, STHeitiSC;
            font-weight: 500;
          }
        }
      }
      .box {
        display: flex;
        position: relative;
        .img {
          width: 40px;
          height: 40px;
          margin-right: 7px;
        }
        .triangle {
          width: 0;
          height: 0;
          border-right: 6px solid #ffffff;
          border-top: 6px solid transparent;
          border-bottom: 6px solid transparent;
          position: absolute;
          left: 46px;
          top: 23px;
        }

        .redtriangle {
          width: 0;
          height: 0;
          border-right: 6px solid #f9624b;
          border-top: 6px solid transparent;
          border-bottom: 6px solid transparent;
          position: absolute;
          left: 46px;
          top: 23px;
        }

        .box2 {
          display: flex;
          flex-direction: column;
          margin-left: 5px;
          .video_box {
            position: relative;
            width: 140px;
            height: 100px;
            cursor: pointer;

            .play {
              width: 25px;
              height: 25px;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              background: url('@/assets/image/material/play.png') no-repeat;
              background-size: cover;
              z-index: 1;
            }
          }

          .text1 {
            color: #969696;
            font-size: 12px;
            margin-bottom: 3px;
          }
          .white {
            text-align: left;
            background-color: #fff;
            color: #000000;
            max-width: 300px;
            word-break: break-all;
            display: inline-flex;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 16px;
            line-height: 20px;
            font-family: STHeitiSC-Medium, STHeitiSC;
            font-weight: 500;
          }
          .white_text {
            display: block;
            line-height: 18px;
          }
        }
      }
      .picture {
        position: relative;
      }
      .gif {
        position: relative;
        .gifimg {
          width: 113.4px;
          height: 77px;
        }
      }
      .businesscard {
        position: relative;
        .text1 {
          color: #969696;
          font-size: 12px;
          margin-bottom: 3px;
          margin-left: 4px;
        }
        .box3 {
          width: 186px;
          height: 99px;
          margin-left: 4px;
          background-color: #ffffff;
          display: flex;
          flex-direction: column;
          padding: 11px 0 0 18px;
          .text2 {
            font-size: 16px;
            color: #000000;
            margin-bottom: 10px;
          }
          .card {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 120px;
            height: 52px;
            border: 1px solid #eaeaea;
            padding: 0 13px;
          }
        }
      }
      .discerntext {
        margin-top: 18px;
        position: relative;
        .discern {
          width: 163px;
          height: 38px;
          background-color: #ffffff;
          line-height: 38px;
          text-align: center;
        }
      }
      .notconnected {
        margin-top: 18px;
        position: relative;
        .nconnected {
          width: 120px;
          height: 38px;
          background-color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 17px;
        }
      }
      .fconnected {
        margin-top: 18px;
        position: relative;
        .connected {
          width: 155px;
          height: 38px;
          background-color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 15px;
        }
      }
      .cancelvideo {
        margin-top: 18px;
        position: relative;
        .cancel {
          width: 98px;
          height: 38px;
          background-color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 15px;
        }
      }
      .voice {
        margin-top: 18px;
        position: relative;
        .voiceted {
          width: 100px;
          height: 38px;
          background-color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 15px;
          position: relative;
          cursor: pointer;
          .audio_con {
            position: absolute;
            left: 5px;
            top: 4px;
            width: 250px;
            height: 30px;
            z-index: -1;
            opacity: 0;
          }
        }
      }
      .voice_right {
        margin-top: 18px;
        position: relative;
        .voiceted_right {
          width: 100px;
          height: 38px;
          background-color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 15px;
          position: relative;
          cursor: pointer;
          .audio_con_right {
            position: absolute;
            left: 5px;
            top: 4px;
            width: 250px;
            height: 30px;
            z-index: -1;
            opacity: 0;
          }
        }
      }
      .audio {
        margin-top: 18px;
        position: relative;
        .audioted {
          width: 100px;
          height: 38px;
          background-color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 15px;
          position: relative;
          cursor: pointer;
        }
      }
      .txt {
        margin-top: 18px;
        position: relative;
        .texttxt {
          // width: 210px;
          // height: 50px;
          background-color: #ffffff;
          padding: 10px 14px;
          line-height: 15px;
          max-width: 230px;
          word-break: break-all;
          display: inline-flex;
          border-radius: 6px;
          cursor: pointer;
        }
      }
      .txt_right {
        margin-top: 18px;
        position: relative;
        .texttxt_right {
          // width: 210px;
          // height: 50px;
          background-color: #ffffff;
          padding: 10px 14px;
          line-height: 15px;
          max-width: 230px;
          word-break: break-all;
          display: inline-flex;
          border-radius: 6px;
        }
      }
      .red {
        margin-top: 18px;
        position: relative;
        .nored {
          width: 270px;
          height: 110px;
          background-color: #ffffff;
          padding: 0 14px;
        }
      }
      .mixedmessage {
        margin-top: 18px;
        position: relative;
        .message {
          width: 270px;
          height: 147px;
          background-color: #ffffff;

          .bg {
            width: 243px;
            height: 99px;
            border: 1px solid #f3f3f3;
            background-color: #fff4ef;
            text-align: center;
            line-height: 99px;
          }
        }
      }
      .groupchat {
        margin-top: 18px;
        position: relative;
        .chat {
          width: 240px;
          height: 106px;
          background-color: #ffffff;
        }
      }
      .schedule {
        margin-top: 19px;
        width: 378px;
        height: 162px;
        background-color: #ffffff;
        overflow: hidden;
        vertical-align: middle;
        position: relative;
        .radius {
          display: inline-block;
          width: 2px;
          height: 2px;
          background-color: #979797;
          border-radius: 50%;
          margin-right: 10px;
        }
      }
      .mycard {
        margin-top: 18px;
        position: relative;
        .personal {
          width: 230px;
          height: 105px;
          background-color: #ffffff;
        }
      }
      .noredenvelopes {
        margin-top: 18px;
        position: relative;
        .noenvelopes {
          width: 260px;
          height: 89px;
          background-color: #f9624b;
          .noenvelopes-layout {
            display: flex;
            margin: 12px 0 0 15px;
          }
          .spot {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #fff0ce;
            line-height: 40px;
          }
          .noenvelopes-line {
            border-bottom: 1px solid #fa8978;
            margin: 7px 0;
          }
          .noenvelopes-text {
            color: #ffebeb;
            font-size: 12px;
          }
        }
      }
      .noredenvelopes_right {
        margin-top: 18px;
        position: relative;
        .noenvelopes_right {
          width: 260px;
          height: 89px;
          background-color: #f9624b;
          .noenvelopes-layout_right {
            display: flex;
            margin-left: 15px;
            padding-top: 12px;
            // margin: 12px 0 0 15px;
          }
          .spot_right {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #fff0ce;
            line-height: 40px;
          }
          .noenvelopes-line_right {
            border-bottom: 1px solid #fa8978;
            margin: 7px 0;
          }
          .noenvelopes-text_right {
            color: #ffebeb;
            font-size: 12px;
          }
        }
      }
      .redenvelopes {
        margin-top: 18px;
        position: relative;
        .envelopes {
          width: 260px;
          height: 89px;
          background-color: #faab9f;
          .spot {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #fff0ce;
            line-height: 40px;
          }
        }
      }

      .link {
        margin-top: 18px;
        position: relative;
        .links {
          background-color: #ffffff;
          cursor: pointer;
          border-radius: 6px;
          padding: 10px 14px;

          .linkss {
            max-width: 180px;
            word-break: break-all;
            color: #969696;
            font-size: 12px;
            margin-right: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
          }
        }
      }
      .link_right {
        margin-top: 18px;
        position: relative;
        .links_right {
          background-color: #ffffff;
          cursor: pointer;
          border-radius: 6px;
          padding: 10px 14px;

          .linkss_right {
            max-width: 180px;
            word-break: break-all;
            color: #969696;
            font-size: 12px;
          }
        }
      }
    }
    .setwidth {
      // width: calc(100% - 255px);
      // width: 70% !important;
      width: 100% !important;
    }
    .restwidth {
      width: 100% !important;
    }

    .apply {
      margin-top: 18px;
      position: relative;
      .applys {
        width: 270px;
        height: 106px;
        background-color: #ffffff;
      }
    }
    .applet {
      margin-top: 18px;
      position: relative;
      .applets {
        width: 260px;
        height: 283px;
        background-color: #ffffff;
        .app-img {
          width: 21px;
          height: 20px;
          vertical-align: middle;
        }
        .app-title {
          color: #969696;
          font-size: 12px;
          margin-left: 8px;
        }
        .app_line {
          border-bottom: 1px solid #eaeaea;
          margin: 7px 0;
        }
        .app_simg {
          vertical-align: middle;
          margin-right: 4px;
        }
        .app-text {
          color: #969696;
          font-size: 12px;
        }
      }
    }
    .applet_right {
      margin-top: 18px;
      position: relative;
      .applets_right {
        width: 260px;
        height: 283px;
        background-color: #ffffff;
        .app-img_right {
          width: 21px;
          height: 20px;
          vertical-align: middle;
        }
        .app-title_right {
          color: #969696;
          font-size: 12px;
          margin-left: 8px;
        }
        .app_line_right {
          border-bottom: 1px solid #eaeaea;
          margin: 7px 0;
        }
        .app_simg_right {
          vertical-align: middle;
          margin-right: 4px;
        }
        .app-text_right {
          color: #969696;
          font-size: 12px;
        }
      }
    }
  }
  .group {
    margin-top: 16px;
    display: flex;
    .group-layout {
      // height: 818px;
      height: 706px;
      border: 1px solid #d6d2d2;
      background-color: #fff;
      overflow: auto;
      border-color: rgba(0, 0, 0, 0.08);
      .group-distance {
        margin-top: 16px;
        padding: 0 16px;
        .group-total {
          font-size: 14px;
          color: #969696;
        }
      }
      .records {
        margin: 8px 0 0 0;
        padding: 0 16px;

        .member {
          // width: 208px;
          height: 52px;
          line-height: 52px;
          text-overflow: ellipsis;
          white-space: nowrap;
          /* width: 60px; */
          line-height: 52px;
          .group-img {
            width: 36px;
            height: 36px;
            vertical-align: middle;
            margin-right: 10px;
          }
        }
      }
      .hover-detail-color {
        background-color: #fffaf9;
        padding-left: -16px;
      }
    }
  }
</style>
